/**
 * LogPanel.js - 日志面板组件
 * 用于显示处理日志和错误信息
 */

// 日志项类型定义
class LogItem {
    constructor(type, message, timestamp = new Date()) {
        this.type = type; // 'info' 或 'error'
        this.message = message;
        this.timestamp = timestamp;
    }

    // 格式化时间戳
    formattedTime() {
        return this.timestamp.toLocaleTimeString();
    }
}

// 日志面板组件
const LogPanel = {
    inject: ['logs', 'errors'],
    template: `
        <div class="log-panel" style="margin-top: 20px; width: 100%;">
            <div v-if="errors && errors.length > 0" class="error-section">
                <h3 style="color: #ff4d4f;">错误 ({{ errors.length }})</h3>
                <div class="error-list" style="max-height: 200px; overflow-y: auto; background-color: rgba(255, 77, 79, 0.1); border-radius: 4px; padding: 10px;">
                    <div v-for="(error, index) in errors" :key="'error-'+index" class="error-item" style="margin-bottom: 5px; color: #ff4d4f;">
                        {{ error }}
                    </div>
                </div>
            </div>
            <div v-if="logs && logs.length > 0" class="log-section">
                <h3 style="color: #52c41a;">日志 ({{ logs.length }})</h3>
                <div class="log-list" style="max-height: 300px; overflow-y: auto; background-color: rgba(82, 196, 26, 0.1); border-radius: 4px; padding: 10px;">
                    <div v-for="(log, index) in logs" :key="'log-'+index" class="log-item" style="margin-bottom: 5px; color: #fff;">
                        {{ log }}
                    </div>
                </div>
            </div>
        </div>
    `
};

// 导出组件和日志项类型
export { LogPanel, LogItem };

// 兼容CommonJS环境
if (typeof module !== 'undefined' && module.exports) {
    module.exports = { LogPanel, LogItem };
}